<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img id="light" src="../imgs/off.gif"> <br>

<div class="cls">传智教育</div>   <br>
<div class="cls">黑马程序员</div> <br>

<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>

<script>
    /*
    获取：使用Document对象的方法来获取
       根据id获取指定的标签元素
           document.getElementById("id值")
       获取是一个id
       根据class属性获取指定的标签元素们
           document.getElementsByClassName("class属性值")
       根据标签名 获取指定的标签元素们
            document.getElementsByTagName("标签名")
       根据 标签属性name名字 获取 ---一般用于表单项
           document.getElementsByName("name属性值")
     */
    var img = document.getElementById("light");
   console.log(img);
   var divs = document.getElementsByClassName("cls");
   console.log(divs);
   var divss = document.getElementsByTagName("div");
   console.log(divss);
   var hobbys = document.getElementsByName("hobby");
   console.log(hobbys);

    //h5 提供了这两个方法
    document.querySelector("#light");
    document.querySelector("div");//获取的是 名字叫div的第一个元素
    document.querySelectorAll("div");//获取的是 名字叫div的所有元素

</script>
</body>
</html>